<template>
  <div>
    <div class="header">
      <el-input
        v-model="input"
        placeholder="请输入内容"
        style="width: 500px"
      ></el-input
      ><el-button type="primary" style="margin-left: 20px">进入贴吧</el-button
      ><el-button type="primary" plain>全吧搜索</el-button>
    </div>
    <div class="main">
      <el-table :data="tableData">
        <el-table-column prop="title" label="标题" width="280" align="center">
          <template slot-scope="slot">
            {{ slot.row.title }}
            <el-popover
              placement="top-start"
              width="50"
              trigger="hover"
              content="发表评论"
            >
              <i
                class="el-icon-edit"
                @click="write(slot.row._id)"
                style="cursor: pointer"
                slot="reference"
              ></i>
            </el-popover>
            <el-popover
              placement="top-start"
              width="50"
              trigger="hover"
              content="查看评论"
            >
              <i
                class="el-icon-mouse"
                @click="look(slot.row._id)"
                style="cursor: pointer"
                slot="reference"
              ></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="280" align="center">
        </el-table-column>
        <el-table-column prop="time" label="时间" align="center">
        </el-table-column>
        <!-- <el-table-column prop="" label="操作" align="center">
          <template slot-scope="slot">
            <el-button type="primary" plain @click="del(slot.row._id)"
              >查看评论</el-button
            >
          </template> -->
        <!-- </el-table-column> -->
      </el-table>
    </div>
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 4, 5]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="add" style="text-align: center">
      <el-link type="success" style="margin: 20px">发布新贴</el-link>
      <el-link
        href="https://element.eleme.io"
        target="_blank"
        style="margin: 20px"
        >发起投票</el-link
      >
      <p>
        <el-input
          v-model="article.title"
          placeholder="请输入标题"
          style="width: 1200px"
        ></el-input>
      </p>
      <p style="margin-top: 20px">
        <el-input
          v-model="article.author"
          placeholder="请输入姓名"
          style="width: 1200px"
        ></el-input>
      </p>
      <P style="margin-top: 30px">
        <el-input
          type="textarea"
          :rows="22"
          placeholder="请输入内容"
          v-model="article.content"
          style="width: 1200px"
        >
        </el-input>
      </P>
      <p>
        <el-button type="primary" @click="addArticle">发布</el-button>
      </p>
    </div>
    <el-dialog title="回复评论" :visible.sync="writeStatus">
      <el-form :model="form">
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="10"
            placeholder="请输入评论"
            v-model="form.content"
            style="width: 500px"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="writeStatus = false">取 消</el-button>
        <el-button type="primary" @click="addAnswer">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="评论列表" :visible.sync="lookStatus">
      <el-form >
        <el-form-item label="暂无评论" :label-width="formLabelWidth">
          <p v-for="item in form1" :key="item._id">{{ item.content }}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="lookStatus = false">取 消</el-button>
        <el-button type="primary" @click="lookStatus = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      input: "",
      currentPage: 1,
      pageSize: 3,
      total: 0,
      form: {
        content: "",
        articleid: "",
      },
      formLabelWidth: '120px',
      form1:[],
      lookStatus: false,
      lookid: "",
      writeStatus: false,
      article: {
        title: "",
        author: "",
        content: "",
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getArticle();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getArticle();
    },
    async addArticle() {
      let token = sessionStorage.getItem("token");
      if (token) {
        let {
          data: { code },
        } = await this.axios.post("/addArticle", this.article);
        if (code == 200) {
          this.$message.success("发布成功");
          this.article = {
            title: "",
            author: "",
            content: "",
          };
          this.getArticle();
        }
      } else {
        alert("请先登录");
        this.$router.push("/login");
      }
    },
    async getArticle() {
      let {
        data: { list, code, total },
      } = await this.axios.get(
        `/getArticle?currentPage=${this.currentPage}&pageSize=${this.pageSize}`
      );
      if (code == 200) {
        this.tableData = list;
        this.total = total;
      }
    },
    write(id) {
      this.writeStatus = true;
      this.form.articleid = id;
    },
    async addAnswer() {
      let {
        data: { code, msg },
      } = await this.axios.post("/addAnswer", this.form);
      if (code == 200) {
        this.$message.success(msg);
        this.writeStatus = false;
        this.form = {
          articleid: "",
          content: "",
        };
        // this.getArticle()
      }
    },
    look(id){
      this.lookStatus = true;
      this.lookid = id
      this.getAnswer()
    },
    async getAnswer(){
      let {data:{list,code}} = await this.axios.get(`/getAnswer?lookid=${this.lookid}`)
      if(code == 200){
        this.form1 = list
        this.lookid =  ''
      }
    }
  },
  created() {
    this.getArticle();
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.header {
  width: 100%;
  height: 50px;
  border: 1px solid rgb(204, 203, 203);
  text-align: center;
  padding-top: 10px;
  position: static;
  top: 0;
  right: 0;
}
.main {
  margin-top: 70px;
  text-align: center;
}
</style>